<template>
    <div class="preview-box">
        <template v-if="pageFileList.length >0">
        </template>
         <template v-else>
            <div class="preview_container">
                <div class="preview_top">
                    <!-- <div class="belong"> 
                        <span class="label">所屬菜單檔：</span>
                        <span>{{belongPosition}} <i class="el-icon-edit"></i></span>
                    </div> -->
                    <el-steps :active="curStep"  finish-status="success" :space="800" align-center>
                        <el-step title="步骤 1" description="選擇頁面結構"></el-step>
                        <el-step title="步骤 2" description="調整模塊寬高"></el-step>
                        <el-step title="步骤 3" description="選擇模塊功能"></el-step>
                    </el-steps>

                </div>
                <div class="preview_main">
                    <div class="preview_operation" >
                        <el-aside  v-show="curStep == 1">
                            <el-checkbox label="页头" border v-model="showHeader"></el-checkbox>
                            <el-checkbox label="頁尾" border v-model="showFooter"></el-checkbox>
                            <el-checkbox label="左側" border v-model="showLeft"></el-checkbox>
                            <el-checkbox label="右側" border v-model="showRight"></el-checkbox>
                        </el-aside>
                        <div class="step2" v-show="curStep == 2">
                            <span>請按需要調整各模塊寬高比例</span>
                        </div>
                        <div class="step3" v-show="curStep == 3">
                            <span>請選擇各模塊功能</span>
                        </div>
                        <div class="preview_operation_btns">
                            <el-button type="primary" v-show="curStep>1" @click ="lastStep" plain >上一步骤</el-button>
                            <el-button type="primary" v-show="curStep<3" @click="nextStep" plain>下一步骤</el-button>
                            <el-button type="danger" v-show="curStep==3" @click="finishSteps">完成</el-button>
                        </div>
                    </div>
                    <div class="preview_model" ref="previewCtn">
                        <!--STEP1-->
                        <section class="el-container is-vertical model-container" v-if="curStep == 1">
                            <header class="el-header model-header" style="height: 60px;" v-show="showHeader">頂部</header> 
                            <section class="el-container model-box">
                                <aside class="el-aside model-left" style="width: 200px;" v-show="showLeft">
                                </aside> 
                                <section class="el-container is-vertical model-center">
                                    <main class="el-main model-main">
                                    </main> 
                                    <footer class="el-footer model-footer" style="height: 60px;" v-show="showFooter">
                                    </footer>
                                </section>
                                <aside class="el-aside model-right" style="width: 200px;" v-show="showRight">
                                </aside> 
                            </section>
                        </section>
                        <!--STEP2-->
                        <splitpanes  v-else-if="curStep ==2" class="default-theme model-container" horizontal :push-other-panes="false" style="height: 100%;" @resize="calOuterSize($event)"
                        @resized="log('resized', $event)">
                            <pane class="model-header" :size="outerSize[0]" v-if="showHeader">
                                <span>顶部</span><span class="perNote">高度比例{{ resizeHeight[0] }}%</span>
                            </pane>
                            <pane :size="outerSize[1]">
                                <splitpanes :push-other-panes="false" @resize="showRowSize($event)">
                                <pane class="model-left" v-if="showLeft"  :size="rowSize[0]" >
                                    <span class="perNote">宽度比例{{ rowSize[0] }}%</span>
                                </pane>
                                <pane class="model-center"  :size="rowSize[1]" >
                                    <splitpanes horizontal :push-other-panes="false"  @resize="calInnerSize($event)">
                                        <pane class="model-main" :size="innerSize[0]">
                                            <span class="perNote">宽度比例{{ rowSize[1] }}%    <br/>    高度比例{{ resizeHeight[1] }}%</span>
                                        </pane>
                                        <pane class="model-footer" v-if="showFooter" :size="innerSize[1]">
                                            <span class="perNote">高度比例{{ resizeHeight [2]}}%</span>
                                        </pane>
                                    </splitpanes>
                                </pane>
                                <pane class="model-right" v-if="showRight" :size="rowSize[2]">
                                    <span class="perNote">宽度比例{{ rowSize[2] }}%</span>
                                </pane>
                                </splitpanes>
                            </pane>
                        </splitpanes>
                        <!--STEP3-->
                        <section class="el-container is-vertical model-container" v-else >
                            <header class="el-header model-header" :style="{'height':pageModle.header.height+'px'}" v-show="showHeader">頂部</header> 
                            <section class="el-container model-box">
                                <aside class="el-aside model-left" :style="{'width':pageModle.left.width+'px'}" v-show="showLeft">
                                    <img :src="pageModle.left.img" v-if="pageModle.left&&pageModle.left&& pageModle.left.region">
                                    <el-button type="primary" class="chooseBtn" plain @click="toSetFun('left')">選擇模塊功能</el-button>
                                </aside> 
                                <section class="el-container is-vertical model-center">
                                    <main class="el-main model-main" :style="pageModle.main&&{'width':pageModle.main.width+'px','height':pageModle.main.height+'px','padding':0}">
                                        <img :src="pageModle.main.img" v-if="pageModle.main&&pageModle.main.region">
                                        <el-button type="primary"  class="chooseBtn" plain @click="toSetFun('main')">選擇模塊功能</el-button>
                                    </main> 
                                    <footer class="el-footer model-footer" v-show="showFooter" :style="pageModle.footer&&{'width':pageModle.footer.width+'px','height':pageModle.footer.height+'px','padding':0}">
                                         <img :src="pageModle.footer.img" v-if="pageModle.footer && pageModle.footer.region">
                                         <el-button type="primary"  class="chooseBtn" plain @click="toSetFun('footer')">選擇模塊功能</el-button>
                                    </footer>
                                </section>
                                <aside class="el-aside model-right" v-show="showRight" :style="pageModle.right&&{'width':pageModle.right.width+'px','height':pageModle.right.height+'px'}">
                                    <img :src="pageModle.right.img" v-if="pageModle.right && pageModle.right.region">
                                     <el-button type="primary"  class="chooseBtn" plain @click="toSetFun('right')">選擇模塊功能</el-button>
                                </aside> 
                            </section>
                        </section>
                    </div>
                </div>
            </div>
        </template>
        <el-dialog title="模塊選擇工具" :visible.sync="ifSet" class="fun_dialog">
            <el-form ref="form" :model="form" label-width="160px" class="fun_form">
                <el-form-item label="模塊佈局位置">
                    <el-input v-model="form.position" style="width:217px;" disabled></el-input>
                </el-form-item>
                <el-form-item label="模塊功能選擇">
                    <el-select v-model="form.region" placeholder="请选择當前模塊功能">
                    <el-option :label="item.name" :value="item.id" v-for="item in funList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="fun_btns">
                <el-button type="primary"  @click="chooseFun">立即创建</el-button>
                <el-button  @click="ifSet = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
    
</template>
<script scoped>
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
export default {
    components: { Splitpanes, Pane },
    computed:{
        pageJson:function(){
            return this.$store.state.design.pageJson;
        },
        funList:function(){
            return this.$store.state.design.partFunction;
        },
        resizeHeight(){
            let outerSize = this.outerSize;
            let innerSize  = this.innerSize;
            let fullSize = [];
            if(outerSize.length == 2){//有頭部
                fullSize[0] = outerSize[0];
                if(innerSize.length == 2){//有底部
                    fullSize[1]  = ((100-outerSize[0])*innerSize[0]/100).toFixed(3);
                    fullSize[2]  = ((100-outerSize[0])*innerSize[1]/100).toFixed(3);
                }else{
                    fullSize[1]  = 100-outerSize[0];
                }
            }else{
                 fullSize[0] = 0;
                if(innerSize.length == 2){//有底部
                    fullSize[1]  = innerSize[0];
                    fullSize[2]  = innerSize[1];
                }else{
                    fullSize[1]  = 100;
                }
            }
            return fullSize
        }
    },
    data(){
        return {
            curStep:1,
            outerSize: [10,90],
            rowSize:[20,60,20],
            innerSize:[50,50],
            ifSet:false,
            pageFileList :[],
            showHeader: true,
            showFooter: true,
            showLeft: true,
            showRight: true,
            belongPosition:'401棟一層',
            form:{position:''},
            pageModle:{}
        }
    },
    methods:{
        toSetFun(type){
            this.ifSet = true;
            if(!this.pageModle[type]){
                this.pageModle[type] = {}
            }
            this.form={
                position:type
            }
        },
        chooseFun(){
            let temp = this.form;
            let {position,region} = temp;
            let part = this.pageModle[position];
            this.pageModle[position] = Object.assign(part,{
                region,
                img:require('@assets/images/'+region+'.png')
            })
            this.ifSet = false;
            this.from = {}
        },
        log(key,event){
            console.log(key,event)
        },
        calOuterSize(event){
            if(event && event.length > 0){
                let arr = event.map(item =>{
                    return (item.size).toFixed(2);
                })
                this.outerSize = arr;
            }
        },
        showRowSize(event){
            if(event && event.length > 0){
                let arr = event.map(item =>{
                    return (item.size).toFixed(2);
                })
                if(arr.length == 1){
                    this.rowSize =  [0,100,0]
                }else if(arr.length == 2){
                    if(!this.showLeft){
                        this.rowSize = [0,...arr];
                    }else{
                        this.rowSize = [...arr,0];
                    }
                }else{
                     this.rowSize = arr;
                }
            }
        },
        calInnerSize(event){
            let leftHeight = 100 - this.outerSize;
            if(event && event.length > 0){
                let arr = event.map(item =>{
                    return (item.size).toFixed(2);
                })
                this.innerSize = arr;
            }
        },
        lastStep(){
            if(this.curStep>1){
                this.curStep--;
            }
        },
        nextStep(){
            let curStep = this.curStep;
            if(curStep <3){
                this.curStep = curStep+1;
            }
            if(curStep ==1){
                this.initProportion();
            }else if(curStep == 2){
                let containerW = this.$refs.previewCtn.clientWidth - 10
                let containerH = this.$refs.previewCtn.clientHeight - 10
                this.recordProportion(containerW,containerH);
            }
        },
        initProportion(){//初始化比例結構
            let cons = {
                main:{}
            };
            if(!this.showHeader){
                this.outerSize = [0,100];
            }else{
                cons['header'] = {};
                this.outerSize = [20,80];
            }
            if(!this.showLeft&& !this.showRight){
                this.rowSize = [0,100,0]
            }else if(this.showLeft&&!this.showRight ){
                cons['left'] = {};
                this.rowSize = [20,80,0]
            }else if(!this.showLeft&&this.showRight ){
                cons['right'] = {};
                this.rowSize = [0,80,20]
            }else{
                cons['left'] = {};
                 cons['right'] = {};
                this.rowSize = [15,70,15]
            }
            if(!this.showFooter){
                this.innerSize = [100,0]
            }else{
                 cons['footer'] = {};
                 this.innerSize = [70,30]
            }
            this.pageModle = cons;
        },
        recordProportion(containerW,containerH){
            let  temp =this.pageModle;
            Object.keys(temp).forEach(item =>{
                switch (item){
                    case 'header':{
                        temp['header'] = {
                            height: this.outerSize[0]*containerH/100,
                            width:containerW,
                            heiper:this.outerSize[0],
                            widper:100
                        }
                        break;
                    }
                    case 'footer':{
                        temp['footer'] = {
                            height: this.outerSize[1]*this.innerSize[1]*containerH/10000,
                            width:this.rowSize[1]*containerW/100,
                            heiper:this.outerSize[1]*this.innerSize[1]/100,
                            widper:this.rowSize[1]
                        }
                        break;
                    }
                    case 'main':{
                        temp['main'] = {
                            height: this.outerSize[1]*this.innerSize[0]*containerH/10000,
                            width:this.rowSize[1]*containerW/100,
                            heiper:this.outerSize[1]*this.innerSize[0]/100,
                            widper:this.rowSize[1]
                        }
                        break;
                    }
                    case 'left':{
                        temp['left'] = {
                            height: this.outerSize[1]*containerH/100,
                            width:this.rowSize[0]*containerW/100,
                            heiper:this.outerSize[1],
                            widper:this.rowSize[0]
                        }
                        break;
                    }
                    case 'right':{
                        temp['right'] = {
                            height: this.outerSize[1]*containerH/100,
                            width:this.rowSize[2]*containerW/100,
                            heiper:this.outerSize[1],
                            widper:this.rowSize[2]
                        }
                        break;
                    }
                }
            })
        },
        finishSteps(){
            this.$store.commit('setPageJson',this.pageModle);
            this.$router.push('/pagefile')
        }
    }
}
</script>
<style scoped>
.preview-box{
    margin:20px;
    padding: 10px;
    box-shadow: 0 0 20px #2c3e50;
    box-sizing: border-box;
    border-radius: 5px;
}
/**頭部**/
.preview_container {
    width: 100%;
    height: 100%;
}
.preview_container .preview_top{
    display: flex;
    align-content: center;
    justify-content: space-around;
    border-bottom:1px solid #f0f0f0;
    padding: 10px 5px;
}
.preview_container .preview_top .el-steps{
    width:90%;
}
.preview_container .preview_top .label{
    font-size:14px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(155,155,155,1);
}
.preview_container .preview_top i{
    margin-left: 3px;
    color:#6AAFF5;
}
.preview_container .preview_main{
    display: flex;
    justify-content: space-around;
    height: 95%;
    box-sizing: border-box;
}
/**左側操作模板**/
.preview_container .preview_main .preview_operation{
    flex:2;
    border-right:1px solid #f0f0f0;
    height: 700px;
    box-sizing: border-box;
    position: relative;
}
.preview_operation .preview_step{
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    color:rgba(155,155,155,1);
    font-weight: 400;
    font-size: 16px;
    margin:5px auto;
    padding: 10px 0;
}
.preview_operation .step2,.preview_operation .step3{
    margin-top:50px;
    font-weight: 600;
}
.preview_operation .preview_operation_btns{
    width: 100%;
    position:absolute;
    bottom:30px;
    left:50%;
    transform: translateX(-50%);
}
.preview_operation .el-aside{
    margin-top:15px;
    height: 85%;
}
.preview_operation .el-aside label{
    display: block;
    width:100px;
    margin:10px auto 0 !important;
}
.preview_operation  .operation_status{
    width:100%;
    height: 160px;
}
/**右側預覽模板**/
.preview_container .preview_main .preview_model{
    flex:10;
    height: 700px;
    padding: 5px;
    box-sizing: border-box;
}
.preview_container .preview_main .perNote{
    color:#030f21;
    font-size:14px;
    line-height: 24px;
    margin-left:10px;
    position:absolute;
    display: inline-block;
    background-color:rgba(256,256,256,0.7);
    padding: 20px 10px;
    border-radius: 5px;
    top:5px;
    left:50%;
    transform: translateX(-50%);
    z-index: 100;
}
.preview_model .el-footer,.preview_model .model-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
    position: relative;
}
.preview_model .model-header  span{
    font-size: 18px;
    font-weight: 400;
}
.preview_model .model-left ,.preview_model .model-right{
    background-color: #d3dce6;
    text-align: center;
    line-height: 200px;
    overflow: hidden;
    position: relative;
}
.preview_model .model-left  img,.preview_model .model-right  img{
    width:100%;
    height: 100%;
}
.preview_model  .model-center{
    position: relative;
}
.preview_model .model-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
    overflow: hidden;
    position: relative;
}
.preview_model .model-main  img{
    width:100%;
    height: 100%;
}
.preview_model .model-footer{
    position: relative;
    overflow: hidden;
}
.preview_model .model-footer img{
    width: 100%;
    height: 100%;
}
.preview_model .chooseBtn{
    position: absolute;
    top:20px;
    left:50%;
    transform: translateX(-50%);
    z-index: 1000;
}
/**功能選擇彈框**/
/* .fun_dialog{
    width:1600px;
    left:50%;
    transform: translateX(-50%);
} */
.fun_dialog .fun_form{
    width:70%;
    margin:10px auto;
}
.fun_dialog .fun_btns{
    margin-top:30px;
}
.splitpanes__pane {
  justify-content: center;
  align-items: center;
  display: flex;
}

.splitpanes__pane span {
  font-family: Helvetica, Arial, sans-serif;
  color: #333;
  font-size: 5em;
  opacity: 0.6;
}
</style>